<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小红</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height:200px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 100%;
            height: 162px;
            text-align: center;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .nav li {
            width: 20%;
            height: 74px;
            float: left;
        }

        .nav li img {
            width: 40px;
        }

        .nav li span {
            display: block;
        }

        .nav a {
            color: #666;
            font-size: 12px;
        }
        .open{
            width: 100%;
            height: 45px;
            background-color: #333333;
            color: #fff;
            display: flex;
        }
        .open li{
            display: flex;
            justify-content: center;
            align-items: center
        }
        .open li:nth-child(1){
            width:8%;
        }
        .open li:nth-child(1) img{
            width: 10px;
        }
        .open li:nth-child(2){
            width: 10%;
        }
        .open li:nth-child(2) img{
            width: 30px;
        }
        .open li:nth-child(3){
            width: 57%;
        }
        .open li:nth-child(4){
            width: 25%;
            height:44px;
            background-color: #F63515;;
        } 
        .sousuo-wrapper{
            width: 100%;
            height: 44px;
            display: flex;
            background-color: #c82519;
            color: #fff;
            align-items: center;
            position: sticky;
            top: 0;
        }
        .btn,
        .denglu{
            width: 44px;
            height: 44px;
        }
        .sousuo{
            height: 30px;
            background-color: #fff;
            flex: 1;
            border-radius: 15px;
            display: flex;
        }
        .denglu{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .btn span{
            margin: 14px 0 0 15px;
            width: 20px;
            height: 18px;
            display: block;
            background: url(img/gang.png) no-repeat;
            background-size: 100% 100%;
        }
        .jd{
            width: 20px;
            height: 15px;
            background: url(img/jd.png) no-repeat;
            background-size: 20px 15px;
            margin: 8px 8px 0 15px;
        }
        .fangdajing{
            width: 18px;
            height: 15px;
            background: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=) no-repeat;
            background-position: -80px 0;
            background-size: 200px;
            margin: 8px 0 0 15px;
        }
        .xiadaohang{
            background-color: #fff;
            width: 100%;
            height: 50px;
            position: absolute;
            bottom: 0px;
        }
        .xd{
            width: 20%;
            float: left;
            text-align: center;
        }
        .xiadaohang  img{
            width: 60px;
            height: 46px;
        }
        .lb img{
           width: 100%;
        }


    </style>
</head>

<body>

 
        <ul class="open">
            <li>
                <img src="img/close.png" alt="">
            </li>
            <li>
                <img src="img/jingdong.png" alt="">
            </li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>

        <div class="sousuo-wrapper">
            <div class="btn">
                <span></span>
            </div>
            <div class="sousuo">
                <div class="jd"></div>
                <div class="fangdajing"></div>
            </div>
            <div class="denglu">登录</div>
        </div>
        <div class="lb">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="img/小红21.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/小红22.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/小红23.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/小红24.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/小红25.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/小红26.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/小红27.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/小红28.jpg" alt=""></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
              </div>
            
             
        </div>

        <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div class="swiper-slide"><ul class="nav">
                    <li>
                        <a href="javascript:;"><img src="img/小红1.png"><span>天猫精品</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红2.png"><span>今日爆款</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红3.png"><span>天猫国际</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红4.png"><span>饿了吗</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红5.png"><span>天猫超市</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红6.png"><span>充值</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红7.png"><span>闲鱼</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红8.png"><span>钱庄</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红9.png"><span>酒店</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红10.png"><span>淘宝吃货</span></a>
                    </li>
                    </ul></div>
                  <div class="swiper-slide"><ul class="nav">
                    <li>
                        <a href="javascript:;"><img src="img/小红10.png"><span>天猫精品</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红9.png"><span>今日爆款</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红8.png"><span>天猫国际</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红7.png"><span>饿了吗</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红6.png"><span>天猫超市</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红5.png"><span>充值</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红4.png"><span>闲鱼</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红3.png"><span>钱庄</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红2.png"><span>酒店</span></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="img/小红1.png"><span>淘宝吃货</span></a>
                    </li>
                    
                    </ul></div>
                  
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
              </div>
              <div class="xiadaohang">
                <div class="xd"><img src="img/1.png" alt=""></div>
                <div class="xd"><img src="img/2.png" alt=""></div>
                <div class="xd"><img src="img/3.png" alt=""></div>
                <div class="xd"><img src="img/4.png" alt=""></div>
                <div class="xd"><img src="img/5.png" alt=""></div>
              </div>
    
    <script src="js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
        },
      });
      var swiper1 = new Swiper(".lb .swiper-container", {
                pagination: {
                    el: ".swiper-pagination",
                },
                autoplay:true,
                loop : true,
            });

      </script>
      
</body>

</html>